<template>
  <div>
    <div class="header">
     <img src="../assets/images/logozhiqi.png" alt="" class="logo">
      <img src="../assets/images/bg.png" alt="">
      <div class="btn">
        <button @click="downApp()">点击安装</button>
      </div>

    </div>
    <Shade v-show="showWx"></Shade>


  </div>
</template>

<script>

import Shade from "./shade";
export default {
    components: {
        Shade
    },
    name: "index",
    data() {
        return {
            show: true,
            showWx:false
        };
    },
     methods: {
        downApp() {
             
            
            let ua = navigator.userAgent.toLowerCase();
            let userAgent = navigator.userAgent.toLowerCase();
            //android终端
            let isAndroid =
                ua.indexOf("Android") > -1 || ua.indexOf("Adr") > -1; //ios终端
            let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            if (isWeixinBrowser()) {
                console.log(1)
                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                    window.location =
                        "https://itunes.apple.com/cn/app/id1335570045";          
                } else if (/(Android)/i.test(navigator.userAgent)) {         
                    this.showWx = true;                  
                }
            } else if (userAgent.match(/Alipay/i) == "alipay") {
                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                    window.location =
                        "https://itunes.apple.com/cn/app/id1335570045";

                 
                } else if (/(Android)/i.test(navigator.userAgent)) {
                    //android
                    this.showWx = true;
                }
            } else {
                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                    //ios
                    window.location =
                        "https://itunes.apple.com/cn/app/id1335570045";

                    // alert("ios")
                } else if (/(Android)/i.test(navigator.userAgent)) {
                    //android
                  
                    window.location =
                        "http://pda.aixuepai.com.cn:8060/appUpdate/Download/zhiqi.apk";

                }else{
                  
                    window.location =
                        "http://pda.aixuepai.com.cn:8060/appUpdate/Download/zhiqi.apk";
                }
            }

            function isWeixinBrowser() {
                return /micromessenger/.test(ua) ? true : false;
            }
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
    position: relative;
}
.header img {
    width: 100%;
}
.header .logo{
   position: absolute;
   width: 20%;
   margin-top:20%;
   margin-left: 40%;
}
.btn {
    position: absolute;
    left: 0px;
    top: 38%;
    width: 100%;
    text-align: center;
}
.btn1 {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}
 button {
    width: 26%;
    height: 40px;
    border-radius: 6px;
    background: #ff7a40;
    line-height: 40px;
    color: #fff;
}
.info {
    width: 96%;
    margin-left: 2%;
    background: #fff;
    border-radius: 5px;
    margin-top: 12px;
}
.info h2 {
    text-align: center;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    padding-top: 10px;
}
.info p {
    font-size: 14px;
    color: #333;
    padding: 5px 12px;
    text-indent: 20px;
}
.more {
    font-size: 14px;
    color: #666;
    margin-left: 39%;
}
.more span {
    position: relative;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    width: 36%;
}
.more span img {
    position: absolute;
    right: 0px;
    top: 15px;
    width: 15px;
}
.swiper {
    width: 90%;
    margin-left: 5%;
    margin-top: 50px
}
.swiper img {
    width: 100%;
}
/* 动画 */
.fade-enter-active {
    transition: opacity 0.5s;
}
.fade-enter {
    opacity: 0;
}

.swiper-img {
    width: 100%;
}

.swiper >>> .swiper-pagination-bullet {
    background:greenyellow;

  
}
.swiper >>> .swiper-pagination-bullet-active {
    background: #fff;
}




</style>
